<style lang='scss' type='stylesheet/scss' scoped>
.as-button {
  margin-bottom: 10px;
}
</style>
<template>
  <div>
    <as-h2>indeterminate</as-h2>

    <as-card :text="text"
             title="indeterminate 表示选项处于不确定状态，一般用于全选">
      <as-checkbox :indeterminate="indeterminate" v-model="checkAll" @change="handlerCheckAllChange">全选</as-checkbox>
      <as-checkbox-group v-model="checkPlanList" @change="handlerCheckBoxChange">
        <as-checkbox :label="plan" v-for="plan in planList" :key="plan"></as-checkbox>
      </as-checkbox-group>
    </as-card>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  name: "",
  data() {
    return {
      checkPlanList: ["运动", "吃饭"],
      planList: ["运动", "吃饭", "睡觉", "学习"],
      checkAll: false,
      indeterminate: true,
      text: `<template>
   <div>
     <as-checkbox :indeterminate="indeterminate" v-model="checkAll" 
                  @change="handlerCheckAllChange">全选</as-checkbox>
     <as-checkbox-group v-model="checkPlanList"  @change="handlerCheckBoxChange">
       <as-checkbox :label="plan" v-for="plan in planList" :key="plan"></as-checkbox>
     </as-checkbox-group>
   </div>
 </template>
 <script>
 export default {
   data() {
     return {
      checkPlanList: ["运动", "吃饭"],
      planList: ["运动", "吃饭", "睡觉", "学习"],
      checkAll: false,
      indeterminate: true
     }
   },
   methods:{
     handlerCheckAllChange(val){
       this.indeterminate = false;
       this.checkPlanList = val ? this.planList : [];
     },
     handlerCheckBoxChange(){
       this.indeterminate = this.checkPlanList.length !== 0;
       this.checkAll = this.checkPlanList.length === this.planList.length
     }
   }
 }
 <\/script>`
    };
  },
  methods:{
    handlerCheckAllChange(val){
      this.indeterminate = false;
      this.checkPlanList = val ? this.planList : [];
    },
    handlerCheckBoxChange(){
      this.indeterminate = this.checkPlanList.length !== 0;
      this.checkAll = this.checkPlanList.length === this.planList.length
    }
  }
};
</script>
